<style lang="less" scoped>
.component {
  background-color: #1b88ee;
  padding-top: 0.1rem;
  padding:0.1rem 0.15rem 0.2rem 0.15rem;
  
  
  .switch {
    border: 1px solid #ffffff;
    height: 0.3rem;
    border-radius: 4px;
    ul {
      height: 100%;
      overflow: hidden;
    }
    li {
      border-left: 1px solid #ffffff;
      height: 100%;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.15rem;
      box-sizing: border-box;
      &:first-child {
        border-left: none;
      }
    }
    .active {
      background-color: #fff;
      color: #1b88ee;
    }
  }

  .box {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.1rem;
      .block {
          width: 50%;
          min-width: 50%;
          max-width: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 0.15rem;
          color: #ffffff;
          .num {
              font-size: 0.22rem;
          }
          .name {
              font-size: 0.12rem;
              margin-top: 0.05rem;
          }
      }
      .cline {
          position: relative;
          &::after {
              content: "";
              display: block;
              width: 1px;
              height: 70%;
              background-color: #fff;
              position: absolute;
              top: 15%;
              right: 0;
              transform: scaleX(0.5);
          }
      }
  }
}
</style>
<template>
  <div class="component">
    <div class="container">
      <div class="switch">
        <ul class="grid5">
          <li>今天</li>
          <li>昨天</li>
          <li>本周</li>
          <li>本月</li>
          <li class="active">本年</li>
        </ul>
      </div>
      <div class="box">
        <div class="block cline">
          <div class="num">￥ 89307.23</div>
          <div class="name">销售额</div>
        </div>
        <div class="block">
          <div class="num">￥ 89307.23</div>
          <div class="name">交易笔数</div>
        </div>
        <div class="block cline">
          <div class="num">200</div>
          <div class="name">执行合同中</div>
        </div>
        <div class="block">
          <div class="num">200</div>
          <div class="name">新进商铺</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    getData() {},
    format(list) {}
  },
  mounted() {
    this.getData();
  }
};
</script>
